<template>
  <div class="number-box">
    <button @click="add" :style="{ background: bg }">{{ num }}</button>
  </div>
</template>

<script>
export default {
  // 自定义属性
  props: ["base", "bg"],
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    add() {
      this.num++;
      // 自定义属性可以通过 this 直接访问
      // 子组件将数据传递给父组件：通过自定义事件，this.$emit(), 第一个参数是事件名称，第二个参数是传递的值
      this.$emit('add-num', this.num, 100);
    }
  },

  // 可以理解为小程序的 onLoad / onReady
  mounted() {
    // 父组件传进来的自定义属性 base，作为递增的初始值
    this.num = this.base;
  }
};
</script>

// Vue 项目的所有组件的样式最终是会合并的
// 给组件样式添加scoped属性，就可以实现样式作用域（样式只在本组件起作用，不会影响其他组件）
<style lang="sass" scoped>
button
    padding: 20px
    margin-bottom: 20px
</style>
